<template>
  <section>
    <div class="aside-nav">
      <aside>
        <header class="relative">
          <h1>{{ $t("content.profile.title") }}</h1>
        </header>
        <nav>
          <ul>
            <li
              v-for="(routeItem, _routeItemIndex) in routesList"
              :key="routeItem.path"
            >
              <div
                class="nav-item"
                @click="gotoRoute(routeItem, _routeItemIndex)"
                :class="[
                  _routeItemIndex == routeItemIndex ? 'active' : '',
                  routeItem.checked ? 'show-sub-nav' : '',
                ]"
              >
                <span> {{ $t(routeItem.name) }} </span>
                <IconArrowDown v-if="routeItem.childs" class="svg" />
              </div>
              <div @click.stop v-if="routeItem.childs" class="sub-nav">
                <ul>
                  <li
                    class="nav-item"
                    v-for="(
                      childRouteItem, _childRouteItemIndex
                    ) in routeItem.childs"
                    :class="[
                      _childRouteItemIndex == childRouteItemIndex
                        ? 'active'
                        : '',
                    ]"
                    :key="childRouteItem.path"
                    @click="
                      gotoChildRoute(childRouteItem, {
                        _routeItemIndex,
                        _childRouteItemIndex,
                      })
                    "
                  >
                    {{ $t(childRouteItem.name) }}
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </nav>
      </aside>
    </div>
    <main>
      <h1>{{ $t(currentRouteName) }}</h1>
      <article>
        <NuxtPage v-if="isMounted" />
      </article>
    </main>
  </section>
</template>

<script setup lang="ts">
import {
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  watch,
  watchEffect,
} from "vue";
import { useRoute } from "vue-router";
import routes from "~/data/profile_routes";
import { useMemberStore } from "../../store";
const { profile } = useMemberStore();
const memberStore = useMemberStore();

const route = useRoute();
const routesList = ref(routes);
const currentRouteName = ref("");
const routeItemIndex = ref(0);
const childRouteItemIndex = ref(0);
const isMounted = ref(false);

// 父跳转路由+打开子路由菜单
const gotoRoute = (item: any, index: number) => {
  let path = item.path;
  childRouteItemIndex.value = 0;
  if (!item.path) {
    path =
      routesList.value[index].childs && routesList.value[index].childs![0].path;
  }
  if (item.checked == undefined) {
    item.checked = true;
  } else {
    item.checked = !item.checked;
  }
  if (!item.childs) {
    goto(path, {}, { replace: true });
  }
};

// 子路由跳转
const gotoChildRoute = (
  item: any,
  { _routeItemIndex, _childRouteItemIndex }
) => {
  let path = item.path;
  routeItemIndex.value = _routeItemIndex;
  childRouteItemIndex.value = _childRouteItemIndex;
  currentRouteName.value = item.name;
  goto(path, {}, { replace: true });
};

// 处理菜单展示状态
function firstLoadSearchRouteName(
  routes: any[],
  parentItem?: Object,
  parentIndex?: number
) {
  routes.map((item, index) => {
    if (item.path == route.path) {
      currentRouteName.value = item.name;
      // 表示子路由中传递父路由
      if (parentItem) {
        parentItem.checked = true;
        routeItemIndex.value = parentIndex!;
        childRouteItemIndex.value = index;
      } else {
        routeItemIndex.value = index;
        childRouteItemIndex.value = 0;
      }
    }
    item.childs && firstLoadSearchRouteName(item.childs, item, index);
  });
}
watch(
  route,
  () => {
    if (route.path == "/new_profile") {
      goto("/new_profile/base");
    }
    firstLoadSearchRouteName(routesList.value);
  },
  { immediate: true }
);

watch(
  () => memberStore.profile,
  async () => {
    if (memberStore.profile) {
      await nextTick();
      isMounted.value = true;
    }
  },
  { immediate: true }
);

</script>
<style lang="less" scoped>
section {
  display: grid;
  grid-template-columns: 240px 1fr;
  .aside-nav {
    box-shadow: 2px 0 4px 0px rgba(0, 0, 0, 0.05);
  }
}
aside {
  position: sticky;
  top: var(--yd-header-height);
  header {
    padding: 24px;
    padding-bottom: 0;
    margin-bottom: 16px;
  }
  h1 {
    font-weight: 600;
    font-size: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #cdd6de;
  }
  nav {
    font-size: 16px;
    & > ul {
      display: flex;
      flex-direction: column;
      word-break: break-all;
      white-space: normal;
      gap: 8px;
      & > li > .nav-item {
        position: relative;
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 4px;
          background-color: transparent;
        }
        &:hover,
        &.active {
          background-color: #f6f8fa;
          color: #4168ff;
          &::before {
            background-color: #4168ff;
          }
        }
      }
      .nav-item {
        cursor: pointer;
        display: block;
        padding: 9px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &.show-sub-nav {
          .svg {
            transform: rotate(0deg);
          }
          & + .sub-nav {
            grid-template-rows: 1fr;
            .nav-item {
              &:hover {
                color: #4168ff;
              }
            }
          }
        }
        &.active {
          & + .sub-nav .nav-item.active {
            color: #4168ff;
          }
        }
        .svg {
          transition: all 0.3s;
          transform: rotate(-90deg);
        }
      }
      .sub-nav {
        padding: 0 24px;
        display: grid;
        grid-template-rows: 0fr;
        transition: all 0.3s;
        & > * {
          overflow: hidden;
          li:last-child {
            border-bottom: 1px solid #cdd6de;
          }
        }
      }
    }
  }
}

main {
  padding: 24px;
  background-color: rgb(246, 248, 250);
  display: grid;
  grid-template-rows: auto 1fr;
  h1 {
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 17px;
    margin-top: 0;
  }
  article {
    padding: 40px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #cdd6de;
  }
}

@media screen and (max-width: 768px) {
  .aside-nav,
  main h1 {
    display: none;
  }
  section {
    grid-template-columns: 1fr;
  }
  main {
    padding: 0;
    grid-template-rows: 1fr;
    article {
      min-width: 1px;
      max-width: 100vw;
      padding: 0 82px;
      border: none;
    }
  }
}
</style>
